<template>
  <a-spin :spinning="spinning" size="large">
    <div class="container-header-margin content">
      <div class="race-item flex" style="justify-content: space-between">
        <div class="" v-if="item && item.id">
          <div style="cursor: pointer" @click="toRaceDetail(item.id)">
            <span style="font-size: 20px; font-weight: bold">{{
              item.name
            }}</span>
            <span class="ml-10 desc" v-if="item.parentName">---{{ item.parentName
            }}<span v-if="item.sonName">-{{ item.sonName }}</span></span>
            <a-tag color="pink" class="ml-10" v-if="raceLevel && raceLevel[0]">{{ getRaceLevels(item.level).dictLabel
            }}</a-tag>
            <a-tag color="red" class="ml-10" v-if="raceStatus && raceStatus[0]">{{ getRaceStatuss(item.status).dictLabel
            }}</a-tag>
          </div>
          <div class="desc mt-10">
            <span>报名时间：{{ item.joinStart }}至{{ item.joinEnd }}</span>
            <span class="ml-20">比赛时间：{{ item.raceStart }}至{{ item.raceEnd }}</span>
            <span class="ml-20">发布时间：{{ item.createTime }}</span>
          </div>

          <div class="desc mt-10 flex" style="justify-content: space-between">
            <div>
              <span>可报名人数：{{ item.raceDetail?.capacity || "无" }}</span>

              <span class="ml-20">负责人：{{ item.raceDetail?.name || "无" }}</span>
              <span class="ml-20">手机号：{{ item.raceDetail?.phone || "无" }}</span>
              <span class="ml-20">邮箱：{{ item.raceDetail?.email || "无" }}</span>
              <span class="ml-20" style="cursor: pointer" v-if="item.raceDetail?.groupUrl"
                @click="qrcodeOpen = true">群二维码：
                <QrcodeOutlined class="qrcode" />
              </span>
              <a-button v-if="item.raceDetail?.descUrl" type="link" :href="runtimeConfig.public.apiBaseUrlPrefix +
                item.raceDetail?.descUrl
                " target="_blank">比赛资料</a-button>
              <a-button type="link" @click="rewardOpen = true">比赛奖项</a-button>
            </div>
          </div>
        </div>
        <div class="mt-10" style="text-align: center">
          <div>
            <a-tooltip>
              <template #title>{{
                item.isJoin !== 1 && item.status !== 2
                  ? getRaceStatuss(item.status).dictLabel + "，当前不可报名"
                  : "点击可报名或者查看报名信息"
              }}</template>
              <a-button :type="item.isJoin !== 1 ? 'primary' : 'default'" size="large" @click="jump('/ss/lqb/student')"
                v-if="user?.userInfo?.isTeacher === 0" :disabled="item.isJoin !== 1 && item.status !== 2">{{ item.isJoin
                  !== 1 ?
                  "立即报名" : "查看报名信息" }}</a-button>
              <a-button :type="item.isJoin !== 1 ? 'primary' : 'default'" size="large" @click="jump('/ss/lqb/teacher')"
                :disabled="item.isJoin !== 1 && item.status !== 2" v-if="user?.userInfo?.isTeacher === 1">{{ item.isJoin
                  !== 1 ?
                  "立即报名" : "查看报名信息" }}</a-button>
            </a-tooltip>
          </div>
          <div>
            <a-button class="mt-10" @click="jumpSs">返回上一页</a-button>
          </div>
        </div>
      </div>

      <div class="pt-20 pb-20 pl-20 pr-20">
        {{ item.description }}
      </div>
    </div>

    <a-modal v-model:open="qrcodeOpen" title="群二维码" @ok="qrcodeOpen = false" width="300px" :footer="null">
      <div class="flex" style="justify-content: center">
        <!-- <a-qrcode
          :value="item.raceDetail?.groupUrl"
          v-if="item.raceDetail?.groupUrl"
        /> -->
        <a-image :width="200" :src="runtimeConfig.public.apiBaseUrlPrefix + item.raceDetail?.groupUrl
          " />
      </div>
    </a-modal>

    <a-modal v-model:open="rewardOpen" title="比赛奖项" @ok="rewardOpen = false" width="888px" :footer="null">
      <a-table :columns="columns" :data-source="item.rewardList" bordered :pagination="false">
      </a-table>
    </a-modal>
  </a-spin>
</template>

<script setup>


import { useUserStore } from "@/store/user";
import { SYSYTM_TITLE } from "@/config";
import { race_detail, getRaceStatus, getRaceLevel } from "@/apis";
import { message } from "ant-design-vue";
import { QrcodeOutlined } from "@ant-design/icons-vue";
const runtimeConfig = useRuntimeConfig();
const route = useRoute();
const user = useUserStore();
const spinning = ref(false);
const qrcodeOpen = ref(false);
const rewardOpen = ref(false);
const raceLevel = ref([]);
const raceStatus = ref([]);
const columns = ref([
  {
    title: "奖品名称",
    dataIndex: "name",
  },
  {
    title: "等级",
    dataIndex: "rRank",
  },
  {
    title: "备注",
    dataIndex: "remark",
  },
]);
const item = ref({});
function jump(path) {
  let router = useRouter();
  router.push({ path: path, query: { id: route.query.id } });
}
function jumpSs() {
  let router = useRouter();
  router.push({ path: "/ss" });
}
function init() {
  if (!route.query.id) {
    message.error("请返回比赛列表");
    return;
  }
  spinning.value = true;
  race_detail(route.query.id)
    .then((res) => {
      spinning.value = false;
      item.value = res.data;
      useSeoMeta({
        title: item.value.name + "-" + SYSYTM_TITLE,
        description: SYSYTM_TITLE,
        keywords: "白云学院,创新创业网",
        robots: "index, follow",
        canonical: window.location.href,
      });
    })
    .catch((err) => {
      spinning.value = false;
    });
}
function getRaceStatuss(data) {
  if (!raceStatus.value) {
    return {};
  }
  return raceStatus.value.find((x) => x.dictValue === data + "");
}
function getRaceLevels(data) {

  if (!raceLevel.value) {
    return {};
  }
  return raceLevel.value.find((x) => x.dictValue === data + "");
}
function getRaceLevelList() {
  getRaceLevel().then((res) => {
    raceLevel.value = res.rows;
  });
}
function getRaceStatusList() {
  getRaceStatus().then((res) => {
    raceStatus.value = res.rows;
  });
}

getRaceStatusList();
getRaceLevelList();
init();

watch(() => route.query.id, (newId) => {
  init();
}, { immediate: true }); 
</script>



<style scoped lang="less">
@import "@/assets/css/main.less";

.flex {
  display: flex;
}

.race-item {
  padding: 30px;
  border-bottom: 1px solid #ccc;
}

.desc {
  color: #999;
  font-size: 14px;
}

.qrcode {
  color: @container-header-active-color;
  font-size: 20px;
}
</style>